<!--
 * @Author: fanyoubang
 * @Date: 2021-02-25 09:34:35
 * @LastEditTime: 2021-03-01 09:46:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \newxine:\xj-house\src\xjwDesign\xjw-tag\index.vue
-->
<template>
  <view
    v-if="show"
    :style="[tagStyle]"
    :class="[`xjw-tag__${type}--${color}`, 'xjw-tag']"
  >
    <view class="xjw-tag_text">
      {{ text }}
      <view
        class="xjw-tag-icon iconfont xjw-guanbi1"
        :style="[iconStyle]"
        v-if="closeable"
      ></view>
    </view>
  </view>
</template>
<script lang="ts">
import Vue, { PropType } from "vue";
import { Component, Prop } from "vue-property-decorator";
import { Ttype } from "../types/type";

export type TagColorType = Ttype | "base";

export type TagType = "light" | "dark" | "plain";

interface TagItemStyle {
  "border-radius": string;
  "font-size": string;
  padding: string;
  "margin-right": string;
}

interface IconFontSize {
  "font-size": string;
}

@Component
export default class Index extends Vue {
  // 标签颜色
  @Prop({ type: String as PropType<TagColorType>, default: "primary" }) color;
  // 标签类型
  @Prop({ type: String as PropType<TagType>, default: "light" }) type;
  // 圆角值单位rpx
  @Prop({ type: Number, default: 4 }) border;
  // 标签文字内容
  @Prop({ type: String, default: "" }) text;
  // 标签文字大小单位rpx
  @Prop({ type: Number, default: 24 }) size;
  // 是否显示关闭按钮
  @Prop({ type: Boolean, default: false }) closeable;
  // 文字边距
  @Prop({ type: String, default: "6rpx 16rpx" }) padding;
  // 是否显示
  @Prop({ type: Boolean, default: true }) show;
  // tag右侧间距
  @Prop({ type: Number, default: 24 }) gutter;
  get tagStyle() {
    const style: TagItemStyle = {
      "border-radius": this.border + "rpx",
      "font-size": this.size + "rpx",
      padding: this.padding,
      "margin-right": this.gutter + "rpx",
    };
    return style;
  }
  get iconStyle() {
    const style: IconFontSize = {
      "font-size": this.size / 1.6 + "rpx",
    };
    return style;
  }
}
</script>
<style lang="scss" scoped>
.xjw-tag {
  display: inline-block;
  line-height: 1;
  &__light {
    &--primary {
      color: $primary;
      background: $thin-primary;
    }
    &--warning {
      color: $warning;
      background: $thin-warning;
    }
    &--error {
      color: $error;
      background: $thin-error;
    }
    &--base {
      color: $base-color;
      background: $thin-base-color;
    }
  }
  &__dark {
    &--primary {
      color: #fff;
      background: $primary;
    }
    &--warning {
      color: #fff;
      background: $warning;
    }
    &--error {
      color: #fff;
      background: $error;
    }
    &--base {
      color: #fff;
      background: $base-color;
    }
  }
  &__plain {
    &--primary {
      border-width: 2upx;
      border-style: solid;
      color: $primary;
      border-color: $primary;
    }
    &--warning {
      border-width: 2upx;
      border-style: solid;
      color: $warning;
      border-color: $warning;
    }
    &--error {
      border-width: 2upx;
      border-style: solid;
      color: $error;
      border-color: $error;
    }
    &--base {
      border-width: 2upx;
      border-style: solid;
      color: $base-color;
      border-color: $base-color;
    }
  }
}
.xjw-tag_text {
  display: flex;
  align-items: center;
}
.xjw-tag-icon {
  display: inline-block;
  margin-left: 10upx;
}
</style>
